@import './mixin.scss';
@import './resetBT.scss';
@import './resetElement.scss';
.btn-outline-primary:hover {
  color           : #fff;
  background-color: #556EE6;
  border-color    : #556EE6;
}

.container {
  @include frondWidth
}

.frond-container {
  max-width    : 100%;
  width        : 100%;
  padding      : 0 20px; 
  margin-right : auto;
  margin-left  : auto;
}
@media (max-width:1599.9px) {
  .frond-container {
    padding: 0 16px;
  }
}
@media (max-width:1439.9px) {
  .frond-container {
    padding: 0 12px;
  }
}

.topbar {
  background: #FFF;
}

.logo-front {
  width: 99px;
}

.navbarfrond {
  &-wrap {
    background-color: #556EE6;
    border: none !important;
    height: 100%;
  }
  background: none;
  padding   : 0;
  // display   : flex;
  border: none;
  width: 48px;

  .el-menu-item {
    height     : 53px !important;
    line-height: 53px !important;
    // color      : #FFF !important;
    // min-width  : 100px !important;
    opacity: 0.6;
    margin     : 0;
    padding    : 0 0px !important;
    border     : none !important;
    background-color: transparent !important;
    .el-tooltip{
      padding: 0 !important;
      text-align: center;
      .menu-icon{margin-right: 0;}
    }
    .iconfont {
      @include iconfont;
    }

    // >span,
    // >.menu-icon
    //  {
      
    // }

    &:not(.is-disabled) {

      &:hover {
        background: none;
      }

      &:focus {
        background-color: #4A60E2 !important;
        color           : #FFF !important;
      }
    }

    &.is-active {
      background-color: #4A60E2 !important;
      color           : #FFF !important;
      opacity: 1;
      >span,
      >i,
      >.el-submenu__title>span,
      >.el-submenu__title>i {
        opacity: 1;
      }
    }
  }
  .menu-return{
    position: fixed;
    bottom: 0;
    
    .el-menu-item{
      opacity: 1;
      width: 48px;
    }
   
  }

  .el-submenu__title {
    height     : 53px !important;
    line-height: 53px !important;
    color      : #FFF !important;

    >span,
    >.menu-icon,
    >i
      {
      opacity: 0.6;
    }

    &:hover {
      background: none !important;
    }
    &.is-active,
    &:focus {
      outline         : none;
      background-color: #4A60E2 !important;
    }

    .iconfont {
      @include iconfont;
      vertical-align: top;
    }

    .el-submenu__icon-arrow {
      position   : static;
      top        : inherit;
      right      : inherit;
      margin-top : inherit;
      margin-left: 5px;
      @include iconfont;
    }
  }

  .el-menu--popup {
    >.el-menu-item {
      // height     : 53px !important;
      // line-height: 53px !important;
      margin : 0;
      border : none;
      color  : #555B6D !important;
      padding: 0 12px !important;
    }
  }

  .el-submenu {

    &:hover {
      background: none !important;
    }

    &:focus,
    &.is-active {
      .el-submenu__title {
        height          : 53px;
        line-height     : 53px;
        border          : none;
        color           : #FFF;
        background-color: #4A60E2 !important;
        >span,
        >.menu-icon,
        >i {
          opacity: 1 !important;
        }
      }

    }
  }
}

.navbarfrond-popup {
  box-shadow: 0px 16px 48px 0px rgba(18, 38, 63, 0.17);

  .el-menu-item {
    height     : 53px !important;
    line-height: 53px !important;
    margin     : 0;
    border     : none !important;
    color      : #333 !important;
    padding    : 0 20px !important;

    .iconfont {
      @include iconfont;
    }

    &:not(.is-disabled) {

      &:hover,
      &:focus {
        background-color: #FFF !important;
        color           : #4A60E2 !important;
      }
    }

    &.is-active {
      background-color: #4A60E2 !important;
      color           : #4A60E2 !important;
      font-weight     : bold;

      >span,
      >.menu-icon,
      >i
        {
        opacity: 1 !important;
      }
    }
  }
}

/*  */